<template>
  <view class="update-clothes" :style="{ height: safeAreaHeight + 'px' }">
    <view class="header-clothe-box">
      <view
        class="safe-box"
        :style="{ height: statusTop + safeAreaPadding + 'px' }"
      >
        <view
          class="btn-safe-box"
          :style="{ height: safeAreaPadding + 'px' }"
        ></view>
        <view class="back-btn" :style="{ height: navHeight + 'px' }">
          <uni-icons
            type="left"
            size="28"
            color="#fff"
            @click="closeUpdateClothes"
          ></uni-icons>
        </view>
      </view>
      <view class="img-clothe-box">
        <image :src="imageUrl" class="img-box" mode="scaleToFill" />
      </view>
    </view>
    <view class="clothe-info-box">
      <view class="clothe-info-item">
        <view class="clothe-info-item-label">衣服名称</view>
        <view class="clothe-info-item-value">
          <input
            type="text"
            placeholder="请输入衣服名称"
            v-model="formInfo.name"
          />
        </view>
      </view>
      <view class="clothe-info-item">
        <view class="clothe-info-item-label">衣物类型</view>
        <view class="clothe-info-item-value">
          <picker
            mode="selector"
            :range="categoryOptions"
            @change="handleCategoryChange"
          >
            <view class="picker-text">
              {{ categoryMap[formInfo.category] || "请选择衣物类型" }}
            </view>
          </picker>
        </view>
      </view>
      <view class="clothe-info-item">
        <view class="clothe-info-item-label">适宜气候</view>
        <view class="clothe-info-item-value">
          <input
            type="text"
            placeholder="请输入适宜气候"
            v-model="formInfo.season"
          />
        </view>
      </view>
      <view class="clothe-info-item">
        <view class="clothe-info-item-label">衣服描述</view>
        <view class="clothe-info-item-value">
          <input
            type="text"
            placeholder="请输入"
            v-model="formInfo.description"
          />
        </view>
      </view>
    </view>
    <button class="update-btn-box" @click="saveInfoClothes">确认上传</button>
  </view>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useMemberStore } from "@/stroes";
import { getCategoryAPI, postClothesAPI } from "@/api/clothes";

const { safeArea } = uni.getSystemInfoSync();
const safeAreaPadding = ref(safeArea?.top ?? 0);
const safeAreaHeight = ref(safeArea?.bottom ?? 0);
const res = uni.getMenuButtonBoundingClientRect();
console.log(res);

const statusTop = res.top; //胶囊距离顶部
const navHeight = res.height; //胶囊高度

const memberStore = useMemberStore();
const formInfo = reactive({
  name: "",
  category: "",
  season: "",
  description: "",
});

const categoryMap = ref<Record<string, string>>({});

const categoryList = async () => {
  const res: any = await getCategoryAPI();
  categoryMap.value = res.data;
  console.log("categoryMap", res.data);
};
const categoryKeys = computed(() => Object.keys(categoryMap.value || {}));
const categoryOptions = computed(() => Object.values(categoryMap.value || {}));

// 分类选择变更
const handleCategoryChange = (e: { detail: { value: number } }) => {
  const selectedIndex = e.detail.value;
  const selectedKey = categoryKeys.value[selectedIndex];
  formInfo.category = selectedKey ?? "";
  console.log("当前选中:", formInfo.category);
};
const saveInfoClothes = () => {
  console.log("formInfo===>", formInfo);
  uni.uploadFile({
    url: "/clothes/upload/image",
    filePath: imageUrl.value,
    name: "file",
    success: async (res: any) => {
      const data = JSON.parse(res.data);
      if (data.code === "200") {
        const res: any = await postClothesAPI({
          id: data.data.id,
          name: formInfo.name,
          description: formInfo.description,
          category: Number(formInfo.category),
          season: formInfo.season,
        });
        if (res.code === "200") {
          uni.showToast({ title: "上传成功", icon: "success" });
          uni.navigateBack();
        }
      } else {
        uni.showToast({ title: "上传失败", icon: "none" });
      }
    },
    fail: () => {
      uni.showToast({ title: "提交失败", icon: "none" });
    },
  });
};

const imageUrl = ref("");
onLoad((options: any) => {
  categoryList();
  if (options.imageUrl) {
    imageUrl.value = options.imageUrl;
    console.log("options.imageUrl===>", imageUrl.value);
  }
});

const closeUpdateClothes = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.update-clothes {
  display: flex;
  flex-direction: column;
}
.header-clothe-box {
  overflow: hidden;
  background-color: $uni-color-primary;

  .safe-box {
    .back-btn {
      display: flex;
      align-items: center;
      margin-left: 20rpx;
    }
  }
  .img-clothe-box {
    width: 576rpx;
    height: 474rpx;
    margin: 0 auto;
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;

    .img-box {
      width: 100%;
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      object-fit: contain;
    }
  }
}
.clothe-info-box {
  height: 100%;
  flex: 1;
  padding: 0 46rpx;
  background-color: #fff;
  .clothe-info-item {
    display: flex;
    height: 112rpx;
    align-items: center;
    .clothe-info-item-label {
      width: 30%;
      font-size: 36rpx;
      font-weight: 500;
      margin-right: 20rpx;
      color: #000000;
    }
    .clothe-info-item-value {
      height: 80rpx;
      line-height: 80rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid $uni-color-primary;
      font-size: 32rpx;
      color: #333333;

      input {
        width: 100%;
        height: 100%;
        font-size: 32rpx;
        color: #333333;
        &::placeholder {
          color: #999999;
          font-size: 28rpx;
        }
      }
    }
  }
}
.update-btn-box {
  left: 4%;
  position: fixed;
  bottom: 5%;
  width: 684rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 36rpx;
  border-radius: 25rpx;
  background-color: #85b6a4;
  color: #fff;
  font-size: 36rpx;
  box-shadow: 0 4rpx 16rpx rgba(146, 190, 171, 0.15);
}
.picker-text {
  flex: 1;
  text-align: right;
  color: #6d6c6c;
}
</style>
